import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
    SearchBar,
    List,
    Card,
    Tag,
    Button,
    Toast,
} from 'antd-mobile';
import { PlusOutlined } from '@ant-design/icons';
import styles from './index.module.less';

interface Patient {
    id: string;
    name: string;
    gender: string;
    age: number;
    visitType: 'first' | 'follow-up';
    status: 'waiting' | 'in-progress' | 'completed';
}

const PatientList: React.FC = () => {
    const navigate = useNavigate();
    const [searchValue, setSearchValue] = useState('');

    // Mock data - replace with actual API call
    const patients: Patient[] = [
        {
            id: '1',
            name: '张三',
            gender: '男',
            age: 45,
            visitType: 'first',
            status: 'waiting',
        },
        {
            id: '2',
            name: '李四',
            gender: '女',
            age: 32,
            visitType: 'follow-up',
            status: 'in-progress',
        },
    ];

    const handleSearch = (value: string) => {
        setSearchValue(value);
        // Implement search logic here
    };

    const handlePatientClick = (patient: Patient) => {
        navigate(`/reception/${patient.id}`);
    };

    const handleNewPatient = () => {
        Toast.show({
            content: '请引导患者至挂号处完成注册',
            position: 'center',
        });
    };

    const getStatusTag = (status: Patient['status']) => {
        const statusMap = {
            waiting: { color: 'warning', text: '待诊' },
            'in-progress': { color: 'primary', text: '就诊中' },
            completed: { color: 'success', text: '已完成' },
        };
        const { color, text } = statusMap[status];
        return <Tag color={color}>{text}</Tag>;
    };

    return (
        <div className={styles.container}>
            <div className={styles.header}>
                <SearchBar
                    placeholder="搜索患者姓名/就诊卡号"
                    value={searchValue}
                    onChange={handleSearch}
                />
                <Button
                    className={styles.newPatientBtn}
                    onClick={handleNewPatient}
                >
                    <PlusOutlined /> 新患者
                </Button>
            </div>

            <List className={styles.patientList}>
                {patients.map((patient) => (
                    <List.Item
                        key={patient.id}
                        onClick={() => handlePatientClick(patient)}
                    >
                        <Card className={styles.patientCard}>
                            <div className={styles.patientInfo}>
                                <div className={styles.basicInfo}>
                                    <span className={styles.name}>{patient.name}</span>
                                    <span className={styles.gender}>{patient.gender}</span>
                                    <span className={styles.age}>{patient.age}岁</span>
                                </div>
                                <div className={styles.visitInfo}>
                                    <Tag color={patient.visitType === 'first' ? 'primary' : 'success'}>
                                        {patient.visitType === 'first' ? '初诊' : '复诊'}
                                    </Tag>
                                    {getStatusTag(patient.status)}
                                </div>
                            </div>
                        </Card>
                    </List.Item>
                ))}
            </List>
        </div>
    );
};

export default PatientList; 